<script setup lang="ts">
import { ref } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import UploadIcon from "@iconify-icons/ri/upload-2-line";
import { usePublicFormats } from "../formats";

const props = withDefaults(defineProps<FormProps>(), {
  id: String, // 添加 id prop
  formInline: () => ({
    fileList: [],
    park_code: "",
    type: 0
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

const { parkListOptions } = usePublicFormats();

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-form-item
      label="文件"
      prop="fileList"
      :rules="[{ required: true, message: '文件不能为空' }]"
    >
      <el-upload
        ref="uploadRef"
        v-model:file-list="newFormInline.fileList"
        drag
        multiple
        action="#"
        :limit="1"
        class="!w-[200px]"
        :auto-upload="false"
      >
        <div class="el-upload__text">
          <IconifyIconOffline
            :icon="UploadIcon"
            width="26"
            class="m-auto mb-2"
          />
          可点击或拖拽上传
        </div>
      </el-upload>
    </el-form-item>
    <el-form-item label="停车场" prop="park_code">
      <el-select
        v-model="newFormInline.park_code"
        placeholder="请选择停车场"
        class="w-full"
        clearable
      >
        <el-option
          v-for="item in parkListOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="类型" prop="type">
      <el-select
        v-model="newFormInline.type"
        placeholder="请选择类型"
        clearable
      >
        <el-option label="小强停车" :value="1" />
        <el-option label="泊安飞" :value="2" />
      </el-select>
    </el-form-item>
  </el-form>
</template>
